<extend name="Public/head" />
<block name="style">
    <style>
    .verify-input {
        display: inline-block !important;
        float: left !important;
        width: 60% !important;
        padding-right: 0 !important;
    }
    
    .verify-btn {
        display: inline-block !important;
        float: left !important;
        margin-left: 5% !important;
    }
    
    .send-bg {
        background: #aeaeea;
        color: #fff;
    }
    .aui-card{
    	margin-top:2rem;
    }
    </style>
</block>
<block name="headbar">
    <header class="aui-bar">
        <a class="aui-btn aui-btn-info aui-pull-left" onclick="goback()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <a href="javascript:;" class="aui-btn aui-pull-right aui-bar-info openurl" data-url="register"><span class="iconfont">&#xe604;</span></a>
        <div class="title">{$title}</div>
    </header>
</block>
<block name="body">
    <div class="aui-card">
        <div class="aui-form">
            <form action="register" method="post" name="theForm" id="theForm" onsubmit="javascript:return validator(this)">
                <div class="aui-input-row">
                    <span class="aui-input-addon ">手机号</span>
                    <input type="text" class="aui-input" name="username" placeholder="name" data-validator='/^1[3|5|7|9]\d{11}$/i' data-msg='用户名填写错误'>
                </div>
                <div class="aui-input-row">
                    <span class="aui-input-addon">密　码</span>
                    <input type="password" class="aui-input" name="password" placeholder="password" data-validator='/\w{6,15}/i' data-msg='密码请在6-15位之间'>
                </div>
                <div class="aui-input-row">
                    <span class="aui-input-addon">确认密码　</span>
                    <input type="password" class="aui-input" name="repassword" placeholder="password" data-validator='equal' data-equal='password' data-msg="两次密码输入不一致">
                </div>
                <div class="aui-input-row">
                    <span class="aui-input-addon">短信验证码</span>
                    <input type="text" class="aui-input verify-input" name='smscode' placeholder="" data-validator='/^\d{6}$/i' data-msg="请输入验证码">
                    <span class="pull-right"><button onclick="javascript:sendSms(event);" class='pull-right aui-btn verify-btn' >获取验证码</button></span>
                </div>
                <div class="aui-btn-row submitbtn">
                    <button class="aui-btn aui-btn-block aui-btn-success" id="ajax-post" type='submit'>确认</button>
                </div>
            </form>
        </div>
    </div>
</block>
<block name="script">
    <script>
    function sendSms(e) {
        e.preventDefault();
       
        var mobile = document.querySelector('input[name=username]');
        if (!(/^1[3|5|7|8]\d{9}/i).test(mobile.value)) {
            msg("请输出入正确的手机号", {
                time: 1000
            });
            return false;
        }

        post(API + 'sendsms', {
            mobile: mobile.value
        }, function(data) {
            if (data.status) {
                msg('发送成功');
                 RemainTime();
            } else {
            	msg(data.info);
            }
        });

        return false;
    }

    var iTime = 59;
    var Account;

    function RemainTime() {
        $('button.verify-btn').attr('disabled', true);
        var iSecond, sSecond = "",
            sTime = "";
        if (iTime >= 0) {
            iSecond = parseInt(iTime % 60);
            if (iSecond >= 0) {
                sSecond = iSecond + "秒";
            }
            sTime = sSecond;
            if (iTime == 0) {
                clearTimeout(Account);
                sTime = '获取验证码';
                iTime = 59;

                $('button[name=sendsms]').addClass('send-bg');
                $('button.verify-btn').attr('disabled', false);

            } else {
                Account = setTimeout("RemainTime()", 1000);
                iTime = iTime - 1;
            }
        }
        $('button.verify-btn').text(sTime);
    }
    </script>
</block>
